import React from 'react';
// 导入样式表
import "./index.scss"
// 导入组件
import { Carousel, Flex, Grid } from 'antd-mobile';
// 导入请求Api
import { getSwiperApi, getGroupsApi } from "../../api/axios.js";
import { getCurrentCity } from "../../utils/getCurrentCity";

// 带入环境变量的基地址
import { BASE_URL } from '../../utils/url'


// 导入导航图片
import nav1 from "../../assets/images/nav-1.png";
import nav2 from "../../assets/images/nav-2.png";
import nav3 from "../../assets/images/nav-3.png";
import nav4 from "../../assets/images/nav-4.png";

// 导航数据抽离
const navs = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/list'
}, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/list'
}, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/home/map'
}, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/list'
}]

export default class Index extends React.Component {
    // 状态值
    state = {
        swiperData: [],//轮播图数据
        isSwiperLoaded: false,//轮播图的显示与隐藏
        groups: [],//租房小组数据
        address: JSON.parse(window.localStorage.getItem('localCity')) ? JSON.parse(window.localStorage.getItem('localCity')).label : "北京" // 定位
    }
    // 获取轮播图数据
    async getswiperData() {
        const { data: res } = await getSwiperApi()
        this.setState({
            swiperData: res.body,
            isSwiperLoaded: true
        })
    }

    // 获取租房小组数据
    async getGroupsData() {
        const { data: res } = await getGroupsApi({ area: "AREA%7C88cff55c-aaa4-e2e0" })
        console.log(res, 99);
        this.setState({
            groups: res.body,
        })

    }

    // 渲染轮播图
    // 问题：切换组件时，返回首页，轮播图高度塌陷，且不能自动轮播
    // 解决：给轮播图添加父盒子，设置固定高
    // 不能自动轮播原因组件内部。由于是动态添加图片所导致，需要等组件加载完，在渲染组件，添加条件渲染isSwiperLoaded
    renderSwiper = () => {
        return (this.state.swiperData.map(val => (
            <a
                key={val.id}
                href="/"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={BASE_URL+val.imgSrc}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                />
            </a>
        )))
    }

    // 渲染搜索
    renderSearch() {
        return (<Flex className='search-box'>
            {/* 左侧白色区域 */}
            <Flex className="search">
                {/* 位置 */}
                <div className="location" onClick={() => {
                    this.props.history.push('/citylist')
                }} >
                    <span className="name">{this.state.address}</span>
                    <i className="iconfont icon-arrow" />
                </div>

                {/* 搜索表单 */}
                <div className="form">
                    <i className="iconfont icon-seach" />
                    <span className="text">请输入小区或地址</span>
                </div>
            </Flex>
            {/* 右侧地图图标 */}
            <i className="iconfont icon-map" onClick={() => {
                this.props.history.push('/map')
            }} />
        </Flex>)
    }

    // 渲染导航
    renderNavs = () => {
        return (
            navs.map(val => (
                <Flex.Item key={val.id} onClick={() => { this.props.history.push(val.path) }}  >
                    <img src={val.img} alt="" />
                    <h2>{val.title}</h2>
                </Flex.Item>
            ))

        )
    }

    // 渲染租房小组
    renderGroups(item) {
        return (<Flex className="group-item" justify="around">
            <div className="desc">
                <p className="title">{item.title}</p>
                <span className="info">{item.desc}</span>
            </div>
            <img src={BASE_URL+item.imgSrc} alt="" />
        </Flex>)
    }
// 设置当前位置
  setAddress= async ()=>{
      const {label}= await getCurrentCity()
      console.log(label,'ohh');
    //   如果地址和当前获取的一样，则返回
      if(this.state.address===label) return
    //   否则设置 请求的地址
      this.setState({
        address:label
      })
    }

    // 组件加载时调用
    componentDidMount() {
        // 获取轮播图
        this.getswiperData()
        // 获取租房小组
        this.getGroupsData()
        // 获取当前位置
        this.setAddress()
    }

    render() {
        console.log('render');
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                    {this.state.isSwiperLoaded ? (<Carousel
                        infinite
                        autoplay
                        autoplayInterval={2000}
                    >
                        {this.renderSwiper()}
                    </Carousel>) : ''}
                    {this.renderSearch()}
                </div>

                {/* 导航 */}
                <div className="navs">
                    <Flex>
                        {this.renderNavs()}
                    </Flex>
                </div>

                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组 <span className="more">更多</span>
                    </h3>
                    <Grid
                        data={this.state.groups}
                        columnNum={2}
                        square={false}
                        hasLine={false}
                        onClick={() => {
                            console.log('可以跳转');
                        }}
                        renderItem={item => (this.renderGroups(item))}
                    />
                </div>
               
            </div>
        );
    }
}